<template>
  <div class="home">
    <!-- <gltitle
          :is_mt="true"
          :is_notice="false"
          :is_back="true"
          :is_name="true"
          :title="title"
          :is_right="true"
          :titleRight="titleRight"
          @preserve="path_url('/my/lang')"
      ></gltitle> -->

    <div class="head">
      <div class="container">
        <!--        <div class="db">-->
        <!--          <div class="logo">-->
        <!--            <img-->
        <!--              @click="retreat()"-->
        <!--              src="../../assets/images/Group1_1.png"-->
        <!--              alt=""-->
        <!--            />-->
        <!--          </div>-->
        <!--          <div class="lang">-->
        <!--            <img class="la1" @click="clear" src="@/assets/images/public/icon-clear.png" />-->
        <!--            <img-->
        <!--              class="la1"-->
        <!--              @click="path_url('/my/download')"-->
        <!--              src="../../assets/images/download.png"-->
        <!--              alt=""-->
        <!--            />-->
        <!--            <img-->
        <!--            class="la1"-->
        <!--              @click="path_url('/my/lang')"-->
        <!--              src="../../assets/images/ico_lang.png"-->
        <!--              alt=""-->
        <!--            />-->
        <!--            <img @click="$router.push('/customer')" src="../../assets/images/Group9.png" />-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>

    <div class="container">
      <div class="type-text">{{ $t("title.doc66") }}</div>
      <div class="logo">
        <ul>
          <li>
            <div class="input">
              <input
                type="text"
                :placeholder="$t('page1.doc64')"
                v-model="nickname"
                onkeyup="this.value=this.value.replace(/[ ]/g,'')"
              />
            </div>
          </li>
          <li>
            <div class="input">
              <input
                type="text"
                :placeholder="$t('page1.doc65')"
                v-model="email"
                onkeyup="this.value=this.value.replace(/[ ]/g,'')"
              />
            </div>
          </li>
          <li>
            <div class="input">
              <div class="in">
                <input
                  type="text"
                  :placeholder="$t('page1.doc66')"
                  v-model="code"
                  onkeyup="this.value=this.value.replace(/[ ]/g,'')"
                />
              </div>
              <div class="str" v-if="!time_show" @click="send_click()">
                {{ $t("page1.doc18") }}
              </div>
              <div class="str" v-show="time_show">
                <van-count-down
                  ref="countDown"
                  :time="time"
                  format="ss"
                  @finish="finish_time"
                >
                  <template v-slot="timeData">
                    <span>{{ timeData.seconds }} <var>s</var></span>
                  </template>
                </van-count-down>
              </div>
            </div>
          </li>
          <li class="special_li">
            <!--             <div class="area_name" @click="if_area = true">+{{ areaId }} <van-icon name="arrow-down" /></div>-->
            <div class="area_name" @click="if_area = true">
              +{{ areaId }}
              <img :src="iconUrl" alt="" />
              <img
                class="subscript"
                src="../../assets/images/subscript.png"
                alt=""
              />
            </div>
            <div class="input">
              <input
                type="text"
                :placeholder="$t('page1.doc67')"
                v-model="mobile"
                onkeyup="this.value=this.value.replace(/[ ]/g,'')"
              />
            </div>
          </li>
          <li>
            <div class="input">
              <input
                type="password"
                :placeholder="$t('page1.doc68')"
                v-model="password"
                onkeyup="this.value=this.value.replace(/[ ]/g,'')"
              />
            </div>
          </li>
          <li>
            <div class="input">
              <input
                type="password"
                :placeholder="$t('page1.doc69')"
                v-model="s_password"
                onkeyup="this.value=this.value.replace(/[ ]/g,'')"
              />
            </div>
          </li>
          <li>
            <div class="input">
              <input
                type="text"
                :placeholder="$t('page1.doc70')"
                v-model="invateCode"
                onkeyup="this.value=this.value.replace(/[ ]/g,'')"
              />
            </div>
          </li>
        </ul>
        <div class="check">
          <van-checkbox
            v-model="checked"
            shape="square"
            checked-color="#dfb349"
          >
            <div class="doc">
              {{ $t("page4.doc111") }}
              <span @click="path_url('/article?id=PRIVACY_POLICY')">{{
                $t("page4.doc112")
              }}</span>
            </div>
          </van-checkbox>
        </div>
        <button class="btn" @click="onBtn()" :disabled="isDisable">
          {{ $t("page1.doc22") }}
        </button>
        <!-- <div class="footer_label">Copyright <span>©️</span> 2023</div> -->
      </div>
    </div>

<!--    <div class="service" @click="serviceClick">-->
<!--      <img src="../../assets/images/Group25.png" alt="" />-->
<!--    </div>-->

    <van-popup v-model="if_area" position="bottom" round>
      <div class="area_pop">
        <div class="title rel">
          {{ $t("page.doc41") }}
          <div class="abs" @click="if_area = false">
            <van-icon name="cross" />
          </div>
        </div>
        <div class="so db">
          <div class="ico"></div>
          <div class="flexs">
            <input
              type="text"
              :placeholder="$t('page.doc42')"
              v-model="soAreaId"
            />
          </div>
          <div class="closes" v-if="soAreaId != ''" @click="soAreaId = ''">
            <img src="../../assets/images/ico_close.png" alt="" />
          </div>
        </div>
        <ul>
          <li
            class="db"
            v-for="(item, k) in searchResult"
            :key="k"
            @click="area_set(item.mobilePrefix, item.iconUrl)"
          >
            <div class="ico">
              <img :src="item.iconUrl" alt="" />
            </div>
            <div class="flexs txt">
              {{ item.name }}（+{{ item.mobilePrefix }}）
            </div>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from "vuex";

const phoneReg = /^1[3-578]\d{9}$/; //大陆手机验证
const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
const mailReg = /^(\w-*\.*\+*)+@(\w-?)+(\.\w{2,})+$/; //邮箱验证
import FingerprintJS from "@fingerprintjs/fingerprintjs";

export default {
  data() {
    return {
      tabData: [
        { name: this.$t("page.doc95"), cid: 1 },
        { name: this.$t("page.doc94"), cid: 0 },
      ],
      cid: 1,

      areaId: "44",
      phone: "",
      mobile: "",
      email: "",
      cap: "",
      code: "",
      invateCode: "",
      password: "",
      s_password: "",
      nickname: "",
      areaData: [],
      if_area: false,

      time: 60 * 1000,
      time_show: false,
      time_status: false,
      checked: true,

      registration_data: {
        pwdType: "password",
      },
      isDisable: false,

      soAreaId: "",
      isUa: "",
      iconUrl: "",
      serviceUrl: "",
    };
  },
  computed: {
    searchResult() {
      if (this.soAreaId != "") {
        return this.areaData.filter(
          (item) => item.mobilePrefix.indexOf(this.soAreaId) > -1
        );
      } else {
        return this.areaData;
      }
    },
  },
  watch: {
    soAreaId: {
      immediate: true, //在框的值还没变化时执行如下函数显示出所有的情况
      handler(val) {
        this.code_data = this.areaData.filter((p) => {
          return p.mobilePrefix.indexOf(val) !== -1;
        });
      },
    },
  },
  mounted() {
    this.getArea();
    this.init();
    window.getIsApp = this.getIsApp;

    if (this.common.getPlatform == "IOS") {
      try {
        window.webkit.messageHandlers.getIsApp.postMessage(
          JSON.stringify(json)
        );
        if (this.isUa) {
          this.SET_ISAPPINFO(true);
        }
      } catch (error) {
        console.log("ios error");
      }
    } else {
      try {
        this.isUa = window.android.getIsApp();
        if (this.isUa) {
          this.SET_ISAPPINFO(true);
        }
      } catch (error) {
        console.log("Android error");
      }
    }

    if (this.$route.query.inviteCode != undefined) {
      this.invateCode = this.$route.query.inviteCode;
    }
    if (localStorage.getItem("mobile")) {
      this.mobile = localStorage.getItem("mobile");
    }
    if (localStorage.getItem("email")) {
      this.phone = localStorage.getItem("email");
    }
    if (localStorage.getItem("areaId")) {
      this.areaId = localStorage.getItem("areaId");
    }
    if (localStorage.getItem("invateCode")) {
      this.invateCode = localStorage.getItem("invateCode");
    }
  },

  methods: {
    ...mapMutations([
      "SET_USERDATA",
      "SET_TOKEN",
      "SET_LOGIN",
      "SET_MOBILE",
      "SET_EMAIL",
      "SET_AREAID",
    ]),
    ...mapActions(["Get_userData"]),
    clear() {
      window.location.reload();
    },
    init() {
      this.$post(this.URL.member.url).then((res) => {
        if (res.code == 0) {
          res.data.map((item) => {
            if (item.tag == "CUSTOMER_SERVICE_LINK") {
              this.serviceUrl = item.url;
            }
          });
        } else {
          this.$toast(res.message);
        }
      });
    },
    serviceClick() {
      this.$router.push("/customer");
    },
    retreat() {
      this.$router.go(-1);
    },
    changeType() {
      this.registration_data.pwdType =
        this.registration_data.pwdType === "password" ? "text" : "password";
    },

    onTab(item) {
      this.cid = item.cid;
    },

    finish_time() {
      this.time_status = false;
      this.time_show = false;
    },
    customerService() {
      this.$router.push("/customer");
    },
    send_click() {
      if (this.time_status) {
        this.$toast.success(this.$t("page.doc44"));
        return;
      }
      // if (this.phone.toString().length < 7 || this.phone.toString().length > 12) {
      //   this.$toast.fail(this.$t('new.doc8'));
      //   return;
      // }
      this.send_code();
    },

    send_code() {
      //判断在不在60秒内
      if (this.time_status) {
        //this.$toast("操作频繁.晚点再试");
        this.$toast.success(this.$t("page.doc44"));
      } else {
        if (this.cid == 0) {
          if (
            this.mobile.toString().length < 6 &&
            this.mobile.toString().length < 13
          ) {
            //this.$toast("请输入正确的手机号");
            this.$toast.fail(this.$t("page.doc45"));
            return;
          }
        } else {
          if (!mailReg.test(this.email.replace(/\s+/g, ""))) {
            //this.$toast(this.$t('page.doc46'));
            this.$toast.fail(this.$t("page.doc46"));
            return;
          }
        }

        var send_api = this.URL.user.code_send;
        var send_arr = {
          accountType: this.cid,
          prefix: this.areaId,
          account: this.email.replace(/\s*/g, ""),
          type: 1,
          captchaKey: this.captchaKey,
          captchaCode: this.cap,
        };

        this.$post(send_api, send_arr).then((res) => {
          if (res.code == 0) {
            this.$toast.success(this.$t("page.doc47"));
            // this.code = res.data.code
            this.time_show = true;
            this.time_status = true;
            this.$refs.countDown.reset();
            this.$refs.countDown.start();
          } else {
            this.$toast(res.message);
          }
        });
      }
    },

    area_set(id, url) {
      this.areaId = id;
      this.iconUrl = url;
      this.if_area = false;
    },
    getArea() {
      // this.if_area = true
      this.$post(this.URL.user.country_list, {}).then((res) => {
        if (res.code == 0) {
          this.areaData = res.data;
          let info = res.data.find((item) => item.mobilePrefix == 44);
          if (info != undefined) {
            this.areaId = info.mobilePrefix;
            this.iconUrl = info.iconUrl;
          } else {
            this.areaId = res.data[0].mobilePrefix;
            this.iconUrl = res.data[0].iconUrl;
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    trimAll(ele) {
      if (typeof ele === "string") {
        return ele.split(/[\t\r\f\n\s]*/g).join("");
      } else {
        return ele;
      }
    },
    async getvisitorId() {
      const fp = await FingerprintJS.load();
      const result = await fp.get();
      return result.visitorId;
    },
    async onBtn() {
      let visitorId = await this.getvisitorId();
      // 唯一

      localStorage.setItem("visitorIds", visitorId);
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 2000);

      if (!this.isDisable) {
        return;
      }

      if (
        !this.cid &&
        this.mobile.toString().length < 6 &&
        this.mobile.toString().length < 13
      ) {
        //this.$toast("请输入正确的手机号");
        this.$toast.fail(this.$t("page.doc45"));
        return;
      }

      // if (this.cid && !mailReg.test(this.email.replace(/\s+/g, ""))) {

      //   this.$toast.fail(this.$t("page.doc46"));
      //   return;
      // }
      let re = new RegExp(reg);
      if (re.test(this.password)) {
      } else {
        //密码应为6-20位字母、数字组合字符
        this.$toast(this.$t("page.doc48"));
        return;
      }

      if (this.password != this.s_password) {
        // 两次密码输入不一致
        this.$toast(this.$t("page.doc49"));
        return;
      }

      // if (!this.checked) {
      //   //请勾选用戶註冊協議
      //   this.$toast(this.$t("page.doc58"));
      //   return;
      // }

      if (!this.checked) {
        this.$toast(this.$t("page4.doc110"));
        return;
      }

      let params = {
        account: this.nickname,
        prefix: this.areaId,
        mobile: this.mobile,
        email: this.email.replace(/\s*/g, ""),
        code: this.code,
        inviteCode: this.invateCode,
        loginPassword: this.$md5(this.password),
      };
      this.$post(this.URL.user.regNew, params).then((res) => {
        if (res.code == 0) {
          this.$toast.success(this.$t("page1.doc1"));
          this.SET_MOBILE(this.mobile.replace(/\s*/g, ""));
          this.SET_TOKEN(res.data.token);
          this.SET_LOGIN(true);
          this.SET_AREAID(this.areaId);
          //保存用户信息,判断是否绑定邮箱
          this.Get_userData().then((c) => {
            //   if (!this.cid && !c.data.email) {
            //     this.path_url("/my/upAccess?name=email");
            //   } else {
            this.path_url("/");
            //   }
          });
          // //保存用户信息
          // this.Get_userData()
          // this.path_url('/')
        } else {
          this.$toast(res.message);
        }
      });
    },
    path_url(url, id) {
      if (id == 1) {
        localStorage.setItem("mobile", this.mobile.replace(/\s*/g, ""));
        localStorage.setItem("email", this.email.replace(/\s*/g, ""));
        localStorage.setItem("areaId", this.areaId);
        localStorage.setItem("invateCode", this.invateCode);
      }
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.lang {
  .la1 {
    margin-right: 0.24rem;
  }

  img {
    cursor: pointer;
  }
}

.home {
  min-height: 100vh;
  background-color: #151515;
}

.head {
  height: 220px;
  padding: 0.22rem 0;
  position: relative;
  background: url("../../assets/images/Group34.png") no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: inset 0px 20px 20px 20px #000;

  .container {
    .db {
      display: flex;
      align-items: center;
      justify-content: end;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      font-size: 0.34rem;
      color: #ffffff;

      img {
        height: 0.44rem;
      }

      .close {
        background: red;
        width: 32px;
        height: 32px;
        padding: 5.33px;
        border-radius: 10px;
        background: var(---1, #26292d);
      }
    }
  }
}

.logo {
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: #ffffff;

  .title {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.48rem 0rem 0.35rem 0.28rem;

    .bot {
      width: 1.68rem;
      height: 0.15rem;
      background: linear-gradient(90deg, #fe4263 0%, rgba(254, 66, 99, 0) 100%);
    }
  }

  ul {
    margin: 0.25rem 0rem;

    li {
      background: var(--1, #26292d);
      padding: 0.24rem 0.32rem;
      margin-bottom: 0.24rem;
      border-radius: 0.2rem;

      .name {
        font-size: 0.28rem;
        color: #fe4263;
        margin-bottom: 0.22rem;
      }

      .input {
        display: flex;
        align-items: center;

        input {
          width: 100%;
          height: 0.38rem;
          font-size: 0.28rem;
          font-weight: 400;
          text-align: left;
          color: var(--COcolor1);
          background: none;
          border: 0;
        }

        .in {
          flex: 1;
        }

        .str {
          background: linear-gradient(180deg, #f8f8e0 0%, #f5b975 100%);
          border-radius: 0.16rem;
          padding: 0.12rem 0.24rem;
          color: #000;
          text-align: center;
          font-size: 0.24rem;
          font-weight: 400;

          /deep/ .van-count-down {
            color: var(--COcolor3);
          }
        }
      }
    }

    .special_li {
      display: flex;
      align-items: center;
      padding: 0rem;
      background: none;

      .area_name,
      .input {
        background: #26292d;
        padding: 0.24rem 0.32rem;
        border-radius: 0.2rem;
      }

      .area_name {
        margin-right: 0.24rem;
        display: flex;
        align-items: center;

        img {
          height: 0.42rem;
        }

        .subscript {
          margin-left: 0.18rem;
          height: 0.26rem;
        }
      }

      .input {
        flex: 1;
      }
    }

    // li:last-child{
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   border: none;
    //   .name{
    //     font-size: .3rem;
    //     color: #FFFFFF;
    //     display: flex;
    //     align-items: center;
    //     width: 76%;
    //     margin: unset;
    //     span{
    //       margin-left: 0.14rem;
    //       word-break: break-all;
    //       word-wrap: break-word;
    //       flex: 1;
    //     }
    //   }
    //   img{
    //     height: .94rem;
    //   }
    // }
  }

  .btn {
    width: 100%;
    font-size: 0.3rem;
    font-weight: 500;
    color: #000;
    border: 0;
    text-align: center;
    padding: 0.25rem 0rem;
    background: linear-gradient(180deg, #f8f8e0 0%, #f5b975 100%);
    border-radius: 0.16rem;
    margin: 0.32rem 0rem 1.3rem 0rem;
  }
}

.container {
  margin-top: 16px;
  color: var(--COcolor1);

  .type-text {
    //styleName: 加粗/16;
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    color: var(---, #ffffff);
  }
}

.box {
  height: 70vh;
  width: 100%;

  .flex {
    width: 100%;
  }

  .info {
    padding: 0 0.2rem;
  }

  ul {
    padding-top: 1rem;
    width: 100%;

    li {
      height: 0.88rem;
      background: rgba(0, 0, 0, 0.57);
      border-radius: 0.44rem;
      margin-bottom: 0.4rem;
      padding: 0 0.5rem;

      .area_name {
        border-right: 0.02rem solid #989898;
        padding-right: 0.2rem;
        margin-right: 0.2rem;

        i {
          font-size: 0.24rem;
          margin-left: 0.06rem;
        }
      }

      .str {
        height: 0.88rem;
        background: #585b5e;
        border-radius: 44px;
        margin-right: -0.5rem;
        line-height: 0.88rem;
        padding: 0 0.4rem;
        color: #fff;

        // /deep/ .van-count-down {
        //   color: #fff;height: .88rem;line-height: .88rem;
        // }
      }

      input {
        width: 100%;
        height: 0.38rem;
        font-size: 0.28rem;
        font-weight: 400;
        text-align: left;
        color: #989898;
        background: none;
        border: 0;
      }
    }
  }
}

.bottom {
  .txt {
    margin-top: 0.4rem;
    text-align: center;

    p {
      padding-bottom: 0.2rem;
    }
  }

  /deep/ .van-checkbox__label {
    color: #9ba0a5;
    font-size: 0.24rem;
  }

  /deep/ .van-checkbox {
    justify-content: center;
  }
}

.logo_icon {
  text-align: center;
  margin-top: 0.38rem;
  margin-bottom: 0.53rem;

  img {
    height: 1.67rem;
  }
}

.service {
  position: fixed;
  right: 0.24rem;
  bottom: 3rem;
  z-index: 2;
  padding: 0.24rem;
  border-radius: 50%;
  background: var(--CObackgroundLinear3);

  img {
    height: 0.52rem;
    border-radius: 50%;
  }
}

.check {
  padding: 0.24rem 0.24rem;

  .doc {
    color: #999;

    span {
      color: #f2c409;
    }
  }
}

:deep(.van-checkbox) {
  align-items: start;
  overflow: hidden;

  .van-checkbox__icon--checked .van-icon {
    color: #000;
  }

  .van-icon {
    border-radius: 0.08rem;
  }
}
</style>
